<script setup>
import {ref,onMounted} from "vue"
import {router} from "../../router"

import {useRoute} from "vue-router" 

import home_white from "../../../public/icons/home/home_white.svg" 
import home_black from "../../../public/icons/home/home_black.svg" 
import mymessage_black from "../../../public/icons/home/mymessage_black.svg" 
import mymessage_white from "../../../public/icons/home/mymessage_white.svg" 
import my_image_black from "../../../public/icons/home/my_image_black.svg" 
import my_image_white from "../../../public/icons/home/my_image_white.svg" 
const route = useRoute()

onMounted(()=>{
    document.title = "我的信息 - EvenSO"
    console.log('myHome query:',route.query)
    saveMyImage.value = route.query.image
    saveMyName.value = route.query.name
})

const homeBackRef = ref(null)
const homeImageRef = ref(null)
const myImageBackRef = ref(null)

const myMessageBackRef = ref(null)
const myMessageImageRef = ref(null)
const myImageImageRef = ref(null)

const homeNameRef = ref(null)
const myMessageNameRef = ref(null)
const myImageNameRef = ref(null)

const homeName = ref("首页")
const myMessageName = ref("我的信息")
const myImageName = ref("我的头像")

const saveMyImage = ref(route.query.image)
const saveMyName = ref(route.query.name)


//页面跳转事件
const goToMyHome = () => {

    homeBackRef.value.style.background = "rgb(0,160,216)" 
    homeImageRef.value.src = home_white
    homeNameRef.value.style.color = "#fff"

    myMessageBackRef.value.style.background = "none" 
    myMessageImageRef.value.src = mymessage_black
    myMessageNameRef.value.style.color = "#000"

    myImageBackRef.value.style.background = "none" 
    myImageImageRef.value.src = my_image_black
    myImageNameRef.value.style.color = "#000"

    router.push({
        path: "/account/home",
        query: {
            image: saveMyImage.value,
            name: saveMyName.value
        }
    })
}

const goToMyMessage = () => {

    homeBackRef.value.style.background = "none" 
    homeImageRef.value.src = home_black
    homeNameRef.value.style.color = "#000"

    myMessageBackRef.value.style.background = "rgb(0,160,216)" 
    myMessageImageRef.value.src = mymessage_white
    myMessageNameRef.value.style.color = "#fff"

    myImageBackRef.value.style.background = "none" 
    myImageImageRef.value.src = my_image_black
    myImageNameRef.value.style.color = "#000"

    router.push({
        path: "/account/setting",
        query: {
            name: saveMyName.value
        }
    })
}

const goToMyMyImage = () => {

    homeBackRef.value.style.background = "none" 
    homeImageRef.value.src = home_black
    homeNameRef.value.style.color = "#000"

    myMessageBackRef.value.style.background = "none" 
    myMessageImageRef.value.src = mymessage_black
    myMessageNameRef.value.style.color = "#000"

    myImageBackRef.value.style.background = "rgb(0,160,216)" 
    myImageImageRef.value.src = my_image_white
    myImageNameRef.value.style.color = "#fff"

    router.push({
        path: "/account/face/vip",
        query: {
            image: saveMyImage.value,
        }
    })
}
</script>

<template>
    <div>
        <div class="dialogColorBox"></div> 
        <div class="showBox">
            <div class="titleBox">
                <img src="../../../public/images/login/account_title_image.png" alt="">
            </div>
            <div class="user_message_box">
                <div class="dialog1Box">
                    <div class="dialogNameBox"><span>个人中心</span></div>
                    <div class="homeDialog" ref="homeBackRef" @click="goToMyHome()">
                        <img src="../../../public/icons/home/home_white.svg" alt="" class="homeIcon" ref="homeImageRef"/>
                        <span ref="homeNameRef">{{ homeName }}</span>
                    </div>
                    <div class="myMessageDialog" ref="myMessageBackRef" @click="goToMyMessage()">
                        <img src="../../../public/icons/home/mymessage_black.svg" alt="" class="myMessageIcon" ref="myMessageImageRef"/>
                        <span ref="myMessageNameRef">{{ myMessageName }}</span>
                    </div>
                    <div class="myImageDialog" ref="myImageBackRef" @click="goToMyMyImage()">
                        <img src="../../../public/icons/home/my_image_black.svg" alt="" class="myImageIcon" ref="myImageImageRef"/>
                        <span ref="myImageNameRef">{{ myImageName }}</span>
                    </div>
                </div>
                <div class="showMyMessageBox">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.dialogColorBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 1870px;
    height: 6%;
    background-color: rgb(0,160,216);
}
.showBox{
    position: absolute;
    left: 0;
    top: 6%;
    width: 1870px;
    height: 94%;
    background-color: rgb(255,255,255);
}
.titleBox{
    width: 100%;
    height: 12.2%;
    background-color: rgb(0,160,216);
}
.titleBox img:nth-child(1){
    position: absolute;
    left: 20%;
    top: 0;
    width: 60%;
    height: 15%;
}
.user_message_box{
    position: absolute;
    left: 20%;
    top: 18%;
    width: 60%;
    height: 70%;
    border-radius: 8px;
    box-shadow:0 2px 4px rgba(0,0,0,.14);
    display: flex;
}

.dialog1Box{
    width: 15%;
    height: 100%;
    background-color: #fafafa;
}
.dialogNameBox{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dialogNameBox span{
    color: rgba(0, 0, 0, 0.45);
    cursor: default;
    font-size: 19px;
}
.homeDialog{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgb(0,160,216);
}
.myMessageDialog,
.myImageDialog{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.homeIcon,
.myMessageIcon,
.myImageIcon{
    width: 25%;
    height: 40%;
}
.homeDialog span{
    color: #fff;
}

.showMyMessageBox{
    width: 85%;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
</style>